<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>评论页</title>
    <link rel="stylesheet" href="{{url('css/reset.css')}}"/>
    <link rel="stylesheet" href="{{url('css/index.css')}}"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="baidu-site-verification" content="x1XYMzRXUS" />
</head>
<body>
<!--session检测-->
@if (session()->has('flash_notification.message'))
    <div class="alert alert-{{ session('flash_notification.level') }}">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {!! session('flash_notification.message') !!}
    </div>
@endif
<!--session检测-->
<section id="contentBox" class="commentListPage">
    <p class="contentBox_top" onclick="window.location='{{url('comment_add/'.$a_id)}}';">
        <span>评论</span><span id="count">({{$count}}条)</span><span><span>写评论</span>
        <img width="20" height="20" src="{{url('image/write_comment_1 .png')}}"></span>
    </p>
    <div class="contentBox_main">
        <input type="hidden" id="more" a_id="{{$a_id}}" page="{{$page}}">
        @foreach($data as $k => $v)
        <div class="contentBox_main_member" @if($k == (count($data) - 1)) id="end" @endif>
            <p class="contentBox_main_member_top">
                <span>{{$v['tel']}}</span>
                <span class="zan_num" p_id="{{$v['id']}}"><img width="20" height="20" src="{{url('image/praise.png')}}"><span>{{$v['zan']}}</span></span>
                <span class="contentBox_main_member_write hf hf_p_{{$v['id']}}" p_id="{{$v['id']}}">
                    <img width="20" height="20" src="{{asset('image/write_comment_2.png')}}"><span>回复</span>
                </span>
            </p>
            <p class="contentBox_main_member_content">{{$v['content']}}</p>
            <p class="contentBox_main_member_bottom">{{$v['create_time']}}</p>
            @foreach($v['comment'] as $k2 => $v2)
            <div class="contentBox_main_member contentBox_main_child_member">
                <p class="contentBox_main_member_top"><span>{{$v2['tel']}}</span><span class="zan_num" p_id="{{$v2['id']}}"><img width="20" height="20" src="{{asset('image/praise.png')}}"><span>{{$v2['zan']}}</span></span></p>
                <p class="contentBox_main_member_content">{{$v2['content']}}</p>
                <p class="contentBox_main_member_bottom">{{$v2['create_time']}}</p>
            </div>
            @endforeach
        </div>
        @endforeach
    </div>
    <a href="javascript:void(0)" id="huo" style="width: 120px;">没有数据</a>
</section>

<section id="writeComment" style="display: none;">
    <input type="hidden" id="p_id" value="0" name="p_id">
    <textarea placeholder="既然来了,留下点什么吧" id="content"></textarea>
    <div class="form_info">
        <p>
            <img width="20" height="20" src="{{asset('image/ceil.png')}}">
            <span>手机号</span><input type="text" name="tel" value="">
        </p>
        <p>
            <img width="20" height="20" src="{{asset('image/code.png')}}">
            <span>验证码</span><input type="text" name="yzm" value=""><span id="hq">获取验证码</span>
        </p>
    </div>
    <button id="submit">提交</button>
</section>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="{{asset('layer/layer.js')}}"></script>
<script type="text/javascript">
    var index = '';
    $(window).scroll(function(){
        var mTop = $('#huo').offset().top; //元素距离顶部的高度
        var winHeight = $(window).height(); //窗口的高度
        var scrollHeight = $(window).scrollTop(); //滚动高度
        if((mTop - scrollHeight) < winHeight)
        {
            $('#writeComment').css('display','none');
            page = parseInt($('#more').attr('page')) + 1;
            $('#more').attr('page',page); //重新设置一下page
            a_id = parseInt($('#more').attr('a_id'));
            $('#end').removeAttr('id'); //移除id
            $('#more').remove();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                type : 'POST',
                url : '{{url('comment_list')}}',
                data : {
                    page:page,
                    id:a_id
                },
                success: function(data){
                    $('.contentBox_main').append(data);
                },
            });
        }
    }).trigger('scroll');

    $('.contentBox_main').on('click','.hf',function () {
        //页面层-自定义
        var width = $(window).width()*0.95 + 'px';
        $('#writeComment').css('display','block');
        $('#p_id').val($(this).attr('p_id'));
        index = layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: 'hf',
            area:[width,'420px'],
            content: $('#writeComment')
        });
    });
    //点击发送验证码
    $('.form_info').on('click','#hq',function () {
        var tel = $('input[name=tel]').val();
        if(!tel)
        {
            layer.msg('手机号不能为空！'); return false;
        }
        $.ajax({
            type : 'GET',
            url : '{{url('api/Empire/yzm')}}'+'/'+tel,
            success: function(data){
                layer.msg(data.message);
            },
            error : function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg(XMLHttpRequest.responseJSON.message);
            }
        });
    });
    //点击提交事件
    $('#writeComment').on('click','#submit',function () {
        var tel = $('input[name=tel]').val();
        var yzm = $('input[name=yzm]').val();
        var p_id = $('input[name=p_id]').val();
        var content = $('#content').val();
        $.ajax({
            type : 'POST',
            url : '{{url('api/Empire/addComment')}}',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data : {
                yzm : yzm,
                a_id : '{{$a_id}}',
                p_id : p_id,
                content : content,
                tel : tel
            },
            success: function(data){
                layer.close(index); //关闭layer
                if(data == 1)
                {
                    layer.msg('添加评论成功！');
                    {{--var myDate = new Date();--}}
                    {{--var time = myDate.getFullYear()+'-'+(parseInt(myDate.getMonth()) + 1)+'-'+myDate.getDate();--}}
                    {{--var html = '';--}}
                    {{--html += '<div class="contentBox_main_member contentBox_main_child_member">';--}}
                    {{--html += '<p class="contentBox_main_member_top"><span>'+tel+'</span><span><img width="20" height="20" src="{{asset('image/praise.png')}}"><span>0</span></span></p>';--}}
                    {{--html += '<p class="contentBox_main_member_content">'+content+'</p>';--}}
                    {{--html += '<p class="contentBox_main_member_bottom">'+time+'</p>';--}}
                    {{--html += '</div>';--}}
                    {{--$('.hf_p_'+p_id).parent().parent().append(html);--}}
                    $('#count').html(parseInt({{$count}}) + 1);
                }
                else
                {
                    layer.msg('添加评论失败！');
                }
            },
            error : function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg(XMLHttpRequest.responseJSON.message);
            }
        });
    });

    //点赞实现
    $('#contentBox').on('click','.zan_num',function () {
        var p_id = $(this).attr('p_id');
        var zan = parseInt($(this).children('span').html());
        var span = $(this);
        layer.msg('点赞成功！');
        span.children('span').html(zan + 1);
        span.children('img').attr('src','{{asset('image/praise_complete.png')}}');
        $.get('{{url('api/Empire/zan')}}'+'/'+p_id,function () {});
    });

    $('div.alert').not('.alert-important').delay(1000).fadeOut(350); //自动隐藏flash
</script>
</body>
</html>